<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令-列表渲染-v-for</title>


</head>
<body>

<div id="app">
    <!--
       v-bind:的语法糖(简化形式)是 ：
    -->


    <!--
       v-for : 一层列表渲染
    -->
    <div>
        城市: <select>
        <option v-for="city in cities" :value="city.id">{{city.name}}</option>
    </select>
    </div>


    <!--
       v-for:嵌套的列表渲染
    -->
    <ul>
        <li v-for="city in cities">{{city.name}}
            <ul>
                <li v-for="school in city.schools">{{school.name}}</li>
            </ul>
        </li>
    </ul>


    <!--
     @ 是 v-on: 的语法糖（简写形式）
    -->
    <div>
        <select @change="cityChange" v-model="selected">
            <option v-for="city in cities" :value="city.id">{{city.name}}</option>
        </select>
        学校：<select>
                   <option  v-for="school in schools" :value="school.id">
                       {{school.name}}
                   </option>
             </select>
    </div>
</div>

</body>
<script src="../../lib/vue.global.js"></script>
<script src="../mock/cities.js"></script>
<script>

    var app = Vue.createApp({
        data: function () {
            return {
                cities: cities,
                selected: 1,
                schools:[]
            }
        }, methods: {
            cityChange: function () {

                 var _this = this;

                 var currentCity = cities.find(function (city){
                      return city.id == _this.selected;
                 });

                 this.schools = currentCity.schools;

            }
        }
    });

    app.mount('#app');

</script>
</html>